Compound Component Pattern을 이용한 컴포넌트 추상화

import { searchDocuments } from "@/api/meilisearch";
import { FileSvg, MagnifyingGlassSvg } from "./icons";
import { useState } from "react";
import Link from "next/link";
import { MDData } from "@/lib/types";

interface SearchResult extends MDData {
  _formatted: MDData;
}

export default function SearchModal({
  setIsOpen,
}: {
  setIsOpen: (isOpen: boolean) => void;
}) {
  const [searchResults, setSearchResults] = useState<SearchResult[]>([]);

  async function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
    const searchQuery = event.target.value;
    const results = await searchDocuments(searchQuery);
    setSearchResults(results.hits as SearchResult[]);
  }

  return (
    <div onClick={() => setIsOpen(false)}>
      <Container onClick={(e) => e.stopPropagation()}>
        <Input
          type="text"
          autoFocus
          placeholder="Search docs..."
          onChange={handleChange}
        />

        <div className="flex flex-col gap-2.5">
          {searchResults.length > 0 ? (
            searchResults.map((result) => (
              <SearchResultItem
                key={result.id}
                setIsOpen={setIsOpen}
                result={result}
              />
            ))
          ) : (
            <div className="flex items-center justify-center h-[100px]">
              <span className="text-text text-lg">No results
              </span>
            </div>
          )}
        </div>
      </Container>
    </div>
  );
}